﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Combo - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <style>
        .selectytf {
            width: 197px;
            height: 26px !important;
            height: 17px;
            margin-left: -180px !important;
            margin-left: -179px;
        }
        .sp {
            margin-left: 179px;
            width: 18px;
            overflow: hidden;
        }
        .inputytf {
            height: 20px !important;
            left: -1px;
            position: absolute;
            top: -0.5px !important;
            width: 174px;
            position: absolute;
        }

        .autocomplete {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            border: #008080 1px solid;
        }
         .autocomplete li {
                font-size: 12px;
                cursor: pointer;
                height: 20px;
                line-height: 20px;
                list-style-type:none;
         }

        .hovers {
            background-color: #3368c4;
            color: #fff;
        }
    </style>

</head>
<body>
	<h2>Basic Combo</h2>
	<p>Click the right arrow button to show drop down panel that can be filled with any content.</p>
	<div style="margin:20px 0"></div>
    <table width="440" border="0" align="center">
        <tr>
            <td>
                <div>
                    <div style="position:relative;">
                        <span class="sp">
                            <select id="selectytf" class="selectytf" onchange="setValue(this.selectedIndex)">
                                <option>===请选择===</option>
                                <option value='1'>Java EE</option>
                                <option value='2'>Java SE</option>
                                <option value='3'>Java ME</option>
                                <option value='3'>Net</option>
                                <option value='3'>PHP</option>
                                <option value='3'>Ajax</option>
                                <option value='3'>JQuer</option>
                                <option value='22'>校长1123123</option>
                                <option value='9'>校长JQsdfuer</option>
                                <option value='7'>校长3asdfJasdfQuer</option>
                                <option value='6'>校长a23sdfsaJQuer</option>
                                <option value='4'>校长J232Quer</option>
                            </select>

                        </span>
                        <input id="inputytf" select="ytf" data="" class="inputytf">
                    </div>
                </div>
            </td>
            
        </tr>
    </table>

	<select id="cc" style="width:150px"></select>
	<div id="sp">
		<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
		<div style="padding:10px">
			<input type="radio" name="lang" value="01"><span>Java</span><br/>
			<input id="aa" type="radio" name="lang" value="02"><span>C#</span><br/>
			<input type="radio" name="lang" value="03"><span>Ruby</span><br/>
			<input type="radio" name="lang" value="04"><span>Basic</span><br/>
			<input type="radio" name="lang" value="05"><span>Fortran</span>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
		    $('#cc').combo({
		        required:true,
		        //editable:false
		        onChange:function(a){
		            alert(a);
		        }
			});
			$('#sp').appendTo($('#cc').combo('panel'));
			$('#sp input').click(function(){
				var v = $(this).val();
				var s = $(this).next('span').text();
				$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
			});
		});

		function ytf(value, text) {
		    $("#inputytf").val(text);
		    $("#inputytf").attr("data", value);
		}
		$(document).ready(function() {
		    var cus = 0;
		    var classname = "";
		    var arry = new Array();
		    var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#inputytf");
		    $("#selectytf").find("option").each(function (i, n) {
		        arry[i] = {};
		        arry[i].text = $(this).text();
		        arry[i].value = $(this).attr("value");
		        console.log(arry[i].value);
		    });
 
		    $("#inputytf").focus(function () { if ($("#inputytf").val() == "===请选择===") { $("#inputytf").val(""); } });
		    $("#inputytf").blur(function(){if ($("#inputytf").val() == ""){$("#inputytf").val("===请选择==="); }});
		    $("#inputytf").keyup(function(event) {
		        if ((event.keyCode != 38) && (event.keyCode != 40) && (event.keyCode != 13)) {
		            $autocomplete.empty();
		            var $SerTxt = $("#inputytf").val().toLowerCase();
   
		            if ($SerTxt != "" && $SerTxt != null) {
		                for (var k = 0; k < arry.length; k++) {
		                    if (arry[k].text.toLowerCase().indexOf($SerTxt) >= 0) {
		                        $("<li data='"+arry[k].value+"' title=" + arry[k].text + " class=" + classname + "><>").text(arry[k].text).appendTo($autocomplete).mouseover(function () {
		                            $(".autocomplete li").removeClass("hovers");
		                            $(this).css({
		                                background: "#3368c4",
		                                color: "#fff"
		                            })
		                        }).mouseout(function() {
		                            $(this).css({
		                                background: "#fff",
		                                color: "#000"
		                            })
		                        }).click(function() {
		                            $("#inputytf").val($(this).text());
		                            $autocomplete.hide()
		                        })
		                    }
		                }
		            }
		            $autocomplete.show()
		        }
		        var listsize = $(".autocomplete li").size();
		        $(".autocomplete li").eq(0).addClass("hovers");
                //监听上下键
		        if (event.keyCode == 38) {
		            if (cus < 1) {
		                cus = listsize - 1;
		                $(".autocomplete li").removeClass();
		                $(".autocomplete li").eq(cus).addClass("hovers");
		                var text = $(".autocomplete li").eq(cus).text();
		                var value = $(".autocomplete li").eq(cus).attr("data");
		                var select = $("#inputytf").attr("select") + "('" + value + "','" + text + "')";
		                eval(select);
		            } else {
		                cus--;
		                $(".autocomplete li").removeClass();
		                $(".autocomplete li").eq(cus).addClass("hovers");
		                var text = $(".autocomplete li").eq(cus).text();
		                var value = $(".autocomplete li").eq(cus).attr("data");
		                var select = $("#inputytf").attr("select") + "('" + value + "','" + text + "')";
		                eval(select);
		            }
		        }
		        if (event.keyCode == 40) {
		            if (cus < (listsize - 1)) {
		                cus++;
		                $(".autocomplete li").removeClass();
		                $(".autocomplete li").eq(cus).addClass("hovers");
		                var text = $(".autocomplete li").eq(cus).text();
		                var value = $(".autocomplete li").eq(cus).attr("data");
		                var select = $("#inputytf").attr("select") + "('" + value + "','" + text + "')";
		                eval(select);
		            } else {
		                cus = 0;
		                $(".autocomplete li").removeClass();
		                $(".autocomplete li").eq(cus).addClass("hovers");
		                var text = $(".autocomplete li").eq(cus).text();
		                var value = $(".autocomplete li").eq(cus).attr("data");
		                var select = $("#inputytf").attr("select") + "('" + value + "','" + text + "')";
		                eval(select);
		            }
		        }
                //监听回车键
		        if (event.keyCode == 13) {
		            $(".autocomplete li").removeClass();
		            $autocomplete.hide();
		            var text = $(".autocomplete li").eq(cus).text();
		            var value = $(".autocomplete li").eq(cus).attr("data");
		            var select = $("#inputytf").attr("select") + "('" + value + "','" + text + "')";
		            eval(select);

		        }
		    }).blur(function() {
		        setTimeout(function() {
		            $autocomplete.hide()
		        },
                10000)
		    })
		});
		function setValue(index) {
		    var ddl = document.getElementById("selectytf");
		    var Value = ddl.options[index];
		    var select = $("#inputytf").attr("select") + "('" + $(Value).attr("value") + "','" + Value.text + "')";
		    eval(select);
		}
		</script>

</body>
</html>